<template>
	<view class="list-bg">
		<template v-if="cabinetlist.length > 0">
			<scroll-view scroll-y="true" class="baoxiangui_box" refresher-enabled="true" :refresher-triggered="triggered"
				@refresherrefresh="onRefresh" @scrolltolower="bxgxl()">
				<view class="main padding30">
					<view class="box-card" v-for="(item, index) in cabinetlist" :key="index">
						<view class="list">
							<checkbox-group @change="checkSelectItem($event, item)" >
								<label>
									<checkbox color="#FFAE2A" :value="item.order_id" :checked="true" v-if="checkTrue" />
								</label>
								<label>
									<checkbox color="#FFAE2A" :value="item.order_id" :checked="false" v-if="!checkTrue" />
								</label>
							</checkbox-group>
							<view>
								<view class="image_box">
									<view class="top_box">
										<view class="left_box">
											<view class="dengji">
												<image :src="item.prize_level_icon" mode=""></image>
											</view>
											<image :src="item.prize_icon" mode=""></image>
										</view>
										<view class="right_box">
											<view class="one_box">
												{{ item.prize_name }}
											</view>
											<view class="two_box">
												<!-- 价值：{{ item.price }} -->
											</view>
											<view class="three_box">
												价值：{{ item.price }}大王币{{ item.recovery_price }}
												<text style="float: right;">x{{ item.num }}</text>
											</view>
										</view>
									</view>
									<!-- <view class="bot_box">
										该商品仅可在{{ item.expire_time }}前，进行操作，过期后将自动兑 换为大王币
									</view> -->
								</view>
							</view>


						</view>
					</view>
				</view>
			</scroll-view>
			<!--按扭-->
			<view class="bottom_box">
				<view class="login-btn-box">
					<view>
						<checkbox-group @change="checkSelect(cabinetlist)">
							<label style="display: flex;">
								<checkbox :checked="true" v-if="checkTrue"></checkbox>
								<checkbox :checked="false" v-if="!checkTrue"></checkbox>
								<text>全选</text>
							</label>
						</checkbox-group>
					</view>
				</view>
				<view class="jiesuo" @tap="jiesuaoBtn">
					解锁
				</view>

			</view>
		</template>
		<template v-if="cabinetlist == ''">
			<view class="emptya flex-column flex-c-c">
				<view class="" style="width: 518rpx;height: 412rpx;margin: auto;">
					<image style="width: 100%; height: 100%;" @click="dianji"
						src="https://mh.qingfentool.vip/upload/image/20230529/a63d80de20efc83f80f591044ae9e5dc.png" mode="">
					</image>
					<view style="width: 100%;text-align: center; color: #666666;font-size: 28rpx;">暂无商品～快去抽取心动盲盒吧</view>
				</view>
			</view>
		</template>
		<view class="" style="height: 130rpx;">
			
		</view>
	</view>
</template>
<script>
export default {
	props: ['cabinetlist'],
	data() {
		return {
			checkTrue: false, //全选选中
			orderId: [], // 选中的id
			triggered: false

		};
	},
	onShow() { },
	methods: {
		dianji(){
			////console.log(this.cabinetlist)
		},
		bxgxl() {
			this.$parent.xLower()
		},
		onRefresh() {
			this.triggered = true
			// this.$parent.xBtn()
			setTimeout(() => {
				this.triggered = false
			}, 10)
		},
		jiesuaoBtn() {
			let data = {
				order_id: this.orderId,
				is_locking: 0
			}
			this.$Request.post(this.$api.user.unlock, data).then(res => {
				uni.setStorageSync('cabShuaxin',1)
				if (res.code == 1) {
					uni.showToast({
						title: '请选择商品',
						duration: 2000,
						icon: 'none'
					});
				} else {

					this.cabinetlist.forEach(item => {
						this.$set(item, 'checked', false)
					})
					uni.showToast({
						title: res.msg,
						duration: 2000,
						icon: 'none'
					});
					this.$parent.numPag = 1;
					this.$parent.cabinetlist = []
					this.$parent.xBtn();

					this.checkTrue == false
				}
			})
		},
		// xuanzeTap(e){
		// 	this.checkSelectItem(e)
		// },
		//全选
		checkSelect(e) {

			if (this.checkTrue == true) {
				this.checkTrue = false;
				// 遍历cabinetlist数组 取消全选
				this.cabinetlist.forEach(item => {
					// item.checked = false;
					this.checkTrue = false
					this.orderId = []
					////console.log("全选",this.orderId)
				})
			} else {
				this.checkTrue = true;
				// 遍历cabinetlist数组 设置全选
				this.cabinetlist.forEach(item => {
					// item.checked = true;
					this.checkTrue = true
					////console.log(e, item)
					for (let i = 0; i < e.length; i++) {
						this.orderId.push(e[i].order_id)
					}
				})

			}
		},
		// 多选
		checkSelectItem(e, item) {
			////console.log(e)
			// 如果是取消选中，就把checked置为false,如果是选中，就给添加一个checked=true
			if (item.checked == true) {
				this.$set(item, 'checked', false)
			} else {
				this.$set(item, 'checked', true)
			}
			// 过滤出数组中checked为true的项目，如果和原cabinetlist长度相等，就全选显示
			let newArr = this.cabinetlist.filter(item => (item.checked == true))
			if (newArr.length === this.cabinetlist.length) {
				this.checkTrue = true;
			} else {
				// this.checkTrue = false;
			}
			for (let i = 0; i < newArr.length; i++) {
				////console.log(newArr[i].order_id)
				this.orderId.push(newArr[i].order_id)
			}
		},
	}
};
</script>
<style lang="scss" scoped>
/*通用页面背景*/
.list-bg {
	width: 100%;
	height: 100%;

	// background-color: #F7F7F7;
}

.baoxiangui_box {
	width: 100%;
	margin-top: 10rpx;
	height: calc(100vh - 260rpx);
}

/*卡片样式*/
.box-card {
	// margin-bottom: 30rpx;
	// margin-top: 20rpx;
}

.list {
	width: 96%;
	height: 251rpx;
	border: 1rpx solid #FED187;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	background: rgba(255,231,192,0.1);
	display: flex;
	margin: auto;
	margin-top: 20rpx;
	margin-bottom: 20rpx;

	align-items: center;
	justify-content: space-around;
	align-items: center;

	.image_box {
		width: 600rpx;
		height: 196rpx;
		// background: #FFFFFF;
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		opacity: 1;

		.top_box {
			width: 100%;
			height: 200rpx;
			// background-color: red;
			display: flex;
			align-items: center;
			justify-content: space-around;

			.left_box {
				width: 178rpx;
				height: 178rpx;
				border: 1rpx solid #FED187;
				border-radius: 18rpx 18rpx 18rpx 18rpx;
				opacity: 1;
				position: relative;

				.dengji {
					position: absolute;
					width: 70rpx;
					height: 52rpx;
					top: 10rpx;
					left: 10rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				image {
					width: 100%;
					height: 100%;
				}
			}

			.right_box {
				width: 400rpx;
				height: 178rpx;
				opacity: 1;


				.one_box {
					width: 90%;
					height: 33%;
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					color: #ffffff;
				}

				.two_box {
					width: 100%;
					height: 33%;
					font-size: 28rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					// color: #FA2929;
				}

				.three_box {
					width: 100%;
					height: 33%;
					font-size: 24rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
					font-weight: 500;
					color: #FFAE2A;
				}
			}
		}

		// .bot_box {
		// 	width: 100%;
		// 	height: 80rpx;
		// 	margin-top: 8rpx;
		// 	line-height: 39rpx;
		// 	// background-color: aqua;
		// 	font-size: 20rpx;
		// 	color: #666666;
		// }
	}
}




.bottom_box {
	width: 100%;
	height: 120rpx;
	position: fixed;
	bottom: 130rpx;
	padding: 34rpx 0 0 30rpx;
	background-color: #262626;

	.jiesuo {
		width: 198rpx;
height: 78rpx;
		float: right;
		margin-right: 30rpx;
		margin-top: -60rpx;
		background: linear-gradient(180deg, #FED187 0%, #FFAE2A 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
		font-size: 34rpx;
		text-align: center;
		line-height: 78rpx;
		color: white;
	}

	.login-btn-box {
		width: 200rpx;
		color: #ffffff;
	}

	.login-btn {
		width: 85%;
		clear: both;
		margin-bottom: 1vh;
		left: 8%;
		z-index: 999;
		transform: translateZ(0);
		bottom: env(safe-area-inset-bottom);
		bottom: constant(safe-area-inset-bottom);
	}
}
</style>
